// 验证码登录
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../tools/tools.dart';
import 'components/sws_textfield.dart';

class CodePage extends StatefulWidget {
  const CodePage({
    Key? key,
  }) : super(key: key);

  @override
  CodePageState createState() => CodePageState();
}

class CodePageState extends State<CodePage> {
  String phone = Get.arguments?['phone'] ?? '';

  int timeNum = 4;
  // 定义定时器 myTimer
  late Timer myTimer;
  FocusNode focusNodeOne = FocusNode();
  FocusNode focusNodeTwo = FocusNode();
  FocusNode focusNodeThree = FocusNode();
  FocusNode focusNodeFour = FocusNode();
  FocusNode focusNodeFive = FocusNode();
  FocusNode focusNodeSix = FocusNode();
  FocusScopeNode? focusScopeNode;

  final TextEditingController oneController = TextEditingController(text: "");
  final TextEditingController twoController = TextEditingController(text: "");
  final TextEditingController threeController = TextEditingController(text: "");
  final TextEditingController fourController = TextEditingController(text: "");
  final TextEditingController fiveController = TextEditingController(text: "");
  final TextEditingController sixController = TextEditingController(text: "");

  @override
  void initState() {
    initTime();

    super.initState();
  }

  @override
  void dispose() {
    oneController.dispose();
    twoController.dispose();
    threeController.dispose();
    fourController.dispose();
    fiveController.dispose();
    sixController.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 默认获取焦点
    FocusScope.of(context).requestFocus(focusNodeOne);

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: buildAppBar(),
      body: Stack(
        children: [
          Container(
            decoration: const BoxDecoration(color: SzColor.primary),
            height: rpx(100),
          ),
          Positioned(child: Image.asset('images/imgs/code-backimg.png')),
          Positioned(
            child: SizedBox(
              width: rpx(750),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    margin: EdgeInsets.only(top: rpx(30)),
                    child: Text(
                      '获取验证码',
                      style: TextStyle(
                        fontSize: setSp(40),
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: rpx(30)),
                    child: const Text(
                      '验证码已发送至您的手机',
                      style: TextStyle(color: SzColor.c6),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: rpx(15)),
                    child: Text(
                      '+86 $phone',
                      style: const TextStyle(color: SzColor.c6),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(
                      top: rpx(90),
                      left: rpx(80),
                      right: rpx(80),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '6位数字验证码',
                          style: TextStyle(
                            fontSize: setSp(28),
                            color: SzColor.c6,
                          ),
                        ),
                        timeNum > 0
                            ? Text(
                                '$timeNum tim',
                                style: TextStyle(
                                  fontSize: setSp(28),
                                  color: SzColor.primary,
                                ),
                              )
                            : InkWell(
                                onTap: () {
                                  timeNum = 10;
                                  setState(() {});
                                  initTime();
                                },
                                child: Text(
                                  '重新获取验证码',
                                  style: TextStyle(
                                    fontSize: setSp(28),
                                    color: SzColor.primary,
                                  ),
                                ),
                              ),
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(
                      top: rpx(30),
                      left: rpx(80),
                      right: rpx(80),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        // 一
                        itemOne(
                          context,
                          oneController,
                          focusNodeOne,
                          changed: (value) {
                            if (value.isNotEmpty) {
                              focusScopeNode ??= FocusScope.of(context);
                              focusScopeNode?.requestFocus(focusNodeTwo);
                            }
                          },
                        ),
                        // 二
                        itemOne(
                          context,
                          twoController,
                          focusNodeTwo,
                          changed: (value) {
                            if (value.isNotEmpty) {
                              focusScopeNode ??= FocusScope.of(context);
                              focusScopeNode?.requestFocus(focusNodeThree);
                            }
                          },
                        ),
                        // 三
                        itemOne(
                          context,
                          threeController,
                          focusNodeThree,
                          changed: (value) {
                            if (value.isNotEmpty) {
                              focusScopeNode ??= FocusScope.of(context);
                              focusScopeNode?.requestFocus(focusNodeFour);
                            }
                          },
                        ),
                        // 四
                        itemOne(
                          context,
                          fourController,
                          focusNodeFour,
                          changed: (value) {
                            if (value.isNotEmpty) {
                              focusScopeNode ??= FocusScope.of(context);
                              focusScopeNode?.requestFocus(focusNodeFive);
                            }
                          },
                        ),
                        // 五
                        itemOne(
                          context,
                          fiveController,
                          focusNodeFive,
                          changed: (value) {
                            if (value.isNotEmpty) {
                              focusScopeNode ??= FocusScope.of(context);
                              focusScopeNode?.requestFocus(focusNodeSix);
                            }
                          },
                        ),
                        //六
                        itemOne(
                          context,
                          sixController,
                          focusNodeSix,
                          changed: (value) {
                            if (value.isNotEmpty) {
                              focusNodeSix.unfocus();
                              Get.toNamed('/');
                            }
                          },
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 每个输入框
  Widget itemOne(
    BuildContext context,
    TextEditingController controller,
    FocusNode focusNode, {
    required Function changed,
  }) {
    return Container(
      width: rpx(90),
      height: rpx(100),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(
          rpx(10),
        ),
        border: Border.all(color: SzColor.f4f4f4),
        color: Colors.white,
      ),
      child: SWSTextField(
        controller: controller,
        focusNode: focusNode,
        fillColor: const Color(0xFFffffff),
        borderRadius: 10,
        maxLength: 1,
        onChanged: (value) {
          changed(value);
        },
      ),
    );
  }

  // 头部
  AppBar buildAppBar() {
    return AppBar(
      backgroundColor: SzColor.primary,
      centerTitle: true,
      title: const Text(
        '首筑',
        style: TextStyle(color: Colors.white),
      ),
      leading: IconButton(
        onPressed: () {
          Get.back();
        },
        icon: Icon(
          Icons.chevron_left,
          color: Colors.white,
          size: setSp(60),
        ),
      ),
    );
  }

// 倒计时
  initTime() {
    // 实例化Duration类 设置定时器持续时间 毫秒
    var timeout = const Duration(milliseconds: 1000);
    // 持续调用多次 每次1秒后执行
    myTimer = Timer.periodic(timeout, (_) {
      timeNum--;
      // FPrint(timeNum);
      if (timeNum == 0) {
        // 清除定时器
        myTimer.cancel();
        timeNum = 0;
      }
      setState(() {});
    });
  }
}
